import { Modal, Table } from 'antd'
import { memo, useEffect, useRef } from 'react'
import { CouponCutType, CouponInfoType, QueryUserCouponListParams, queryUserCouponList } from '../services'
import { useRequest } from 'ahooks'
import dayjs from 'dayjs'
import { UserCouponStatus } from '@/pages/normal/normalList/detail'

export interface GetRecordModalProps {
  onCancel?: () => void
  infoId?: number
  infoType?: CouponInfoType
}

const GetRecordModal: React.FC<GetRecordModalProps> = props => {
  const params = useRef<QueryUserCouponListParams>({
    pageNum: 1, pageSize: 10
  })
  const { data, run, loading } = useRequest(queryUserCouponList, {manual: true})

  const onCancel = () => {
    props.onCancel?.()
  }

  useEffect(() => {
    if (props.infoId) {
      params.current.pageNum = 1
      params.current.infoId = props.infoId
      run(params.current)
    }
  }, [props.infoId])

  return (
    <Modal
      title='领取记录'
      open={!!props.infoId}
      onCancel={onCancel}
      footer={false}
      width={1200}
    >
      <Table
        rowKey='id'
        loading={loading}
        dataSource={data?.data}
        pagination={{
          pageSize: params.current.pageSize,
          total: data?.totalCount,
          size: 'small',
          onChange: (page, pageSize) => {
            params.current.pageNum = page === params.current.pageNum ? 1 : page
            params.current.pageSize = pageSize
            run(params.current)
          }
        }}
        columns={[
          {title: '券名称', dataIndex: 'title'},
          {title: '兑换人昵称', dataIndex: 'nickname'},
          {title: '兑换人手机号', dataIndex: 'telephone'},
          {
            title: '优惠项目',
            dataIndex: 'cutType',
            render: val => val && CouponCutType[val],
          },
          {
            title: '优惠内容',
            dataIndex: 'getM',
            render: (val, record) => {
              const { totalM } = record
              if (props.infoType === CouponInfoType.折扣券) return `${val}折`
              if (totalM === 0) return `减${val}`
              return `满${totalM}元，减${val}`
            }
          },
          {title: '使用范围', dataIndex: 'station', render: val => {
            return val === 2 ? '部分场站' : '全部自营场站'
          }},
          {
            title: '领取日期',
            dataIndex: 'createTime',
            render: val => dayjs(val).format('YYYY-MM-DD'),
          },
          {
            title: '截止日期',
            dataIndex: 'endTime',
          },
          {
            title: '状态',
            dataIndex: 'status',
            render: val => val && UserCouponStatus[val],
          },
        ]}
      />
    </Modal>
  )
}

export default memo(GetRecordModal)